<template>
  <div class="container-fluid">
    <div class="row nav">
      <div class="col">
        <a href="/" class="nounderline" :class="{ underline: isCurrentPage('/') }">首页</a>
        <a href="/all-novels/1" class="nounderline" :class="{ underline: route.path.startsWith('/all-novels') }">全部书籍</a><!--有bug-->
      </div>
    </div>
  </div>

</template>

<script setup>
import { useRoute } from 'vue-router';

// 获取当前路由
const route = useRoute();
// 判断当前路径是否匹配给定的路径
const isCurrentPage = (path) => {
  return route.path === path;
};
</script>

<style scoped>
.nav a{
  padding: 10px;
  letter-spacing: 2px;
}
.nav{
  padding-top: 10px;
}
.nounderline{
  text-decoration: none;
  font-weight: bold;
  color: grey;
}
.underline {
  font-size: 20px;
  color: black;
}
</style>
